<template>
    <!-- components/Tabs/Tabs.wxml -->
    <view class="tabs">
        <!-- 自定义方式属性传参 data-index -->
        <view class="tabs_title">
            <view :class="'title_item ' + (item.isActive ? 'active' : '')" @click="handle_item_tap" :data-index="index" v-for="(item, index) in tabs111" :key="item.id">
                {{ item.value }}
            </view>
        </view>
        <view class="tabs_content">
            <slot></slot>
        </view>
    </view>
</template>

<script>
// components/Tabs/Tabs.js
export default {
    data() {
        return {};
    },
    /**
     * 组件的属性列表
     */
    props: {
        tabs111: {
            type: Array,
            default: () => []
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        // 定义点击事件
        handle_item_tap(e) {
            // 获取点击的索引
            const index = e.currentTarget.dataset.index;
            console.log(index); // 触发父组件中的事件 自定义事件名称tabsItemChange  子传父

            this.$emit('tabsItemChange', {
                detail: index
            });
        }
    }
};
</script>
<style>
@import './Tabs.css';
</style>
